<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ImageryLayer</title>

    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
  </head>
  <body>
    <div id="player"></div>

    <div class="btn-list">
      <div onclick="addLayer_Test()" class="btn">创建地图服务对象</div>
      <div onclick="addLayer()" class="btn">创建地图服务对象</div>
      <div onclick="clearLayer()" class="btn">清除图层</div>
    </div>

    <script type="text/javascript">
      const addLayer_Test = async () => {
        let option = {
          cachePath: ':memory:', //默认缓存路径
          mapMode: true, //大地图true，小地图false
          renderMode: 0 //绘制模式：0：正常（默认值）；1：透明；2：标注；3：贴地
        }
        await __g.imageryLayer.init(option)
        let wms2 = {
          id: 'wms_geoserver2',
          url: 'http://127.0.0.1:8099/geoserver/dts_server/wms?service=WMS&version=1.3.0&request=GetMap&layers=dts_server:dom&bbox={bbox-epsg-4547}&width=256&height=256&srs=EPSG:4547&styles=&format=image%2Fpng&TRANSPARENT=true',
          xmlPath: 'http://127.0.0.1:8099/geoserver/dts_server/wms?service=WMS&version=1.3.0&request=GetCapabilities',
          layerName: 'dom',
          tileMatrixName: '',
          ogcEPSG: 'EPSG:4547'
        }
        __g.imageryLayer.add(wms2)
      }

      const addLayer = async () => {
        let option = {
          cachePath: ':memory:', //默认缓存路径mapMode: true,
          mapMode: true, //大地图 true，小地图 false
          renderMode: 0 //绘制模式：0：正常（默认值）；1：透明；2：标注；3：贴地
        }
        await fdapi.imageryLayer.init(option)
        let wmts = {
          id: 'wms_geoserver',
          url: `http://localhost:8099/geoserver/dts_server/wms?service=WMS&version=1.3.0&request=GetMap&layers=dts_server:dom&bbox={bbox-epsg-4547}&width=256&height=256&srs=EPSG:4547&styles=&format=image%2Fpng&TRANSPARENT=true`,
          xmlPath: `http://localhost:8099/geoserver/dts_server/wms?service=WMS&version=1.3.0&request=GetCapabilities`,
          layerName: 'dom',
          tileMatrixName: '',
          ogcEPSG: 'EPSG:4547'
        }
        fdapi.imageryLayer.add(wmts)
      }

      const clearLayer = () => {
        fdapi.imageryLayer.delete(['wms_geoserver', 'wms_geoserver2'])
      }
      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            onEvent: function (event) {
              const eventType = event.eventtype
              console.log('onEvent', event)
            }
          }
        })
      }

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      // 页面加载调用
      window.addEventListener('load', OnLoad, true)

      // 页面窗口变换调用
      window.addEventListener('resize', onResize, true)
    </script>
  </body>
</html>
